import { View, Text, Input } from '@tarojs/components'
import { useEffect, useRef, useState } from 'react'
import { Picker } from '@tarojs/components'
import './index.scss'

interface EditModalProps {
  initialData: {
    height: number
    weight: number
    age: number
    dailyGoal: number
    targetWeight: number
  }
  onSubmit: (data: {
    height: number
    weight: number
    age: number
    dailyGoal: number
    targetWeight: number
  }) => void
  onCancel: () => void
}

const EditModal = ({ initialData, onSubmit, onCancel }: EditModalProps) => {
  const modalRef = useRef<HTMLDivElement>(null)
  const [formData, setFormData] = useState(initialData)

  
  const handlePickerChange = (key: keyof typeof pickerRanges) => (e: any) => {
    const index = e.detail.value
    const value = pickerRanges[key][index] // 直接从数组获取正确值
    setFormData(prev => ({
      ...prev,
      [key]: Number(value)
    }))
  }

  const pickerRanges = {
    height: Array.from({ length: 201 - 140 }, (_, i) => (i + 140).toString()),
    weight: Array.from({ length: 151 - 30 }, (_, i) => (i + 30).toString()),
    targetWeight: Array.from({ length: 151 - 30 }, (_, i) => (i + 30).toString()),
    age: Array.from({ length: 100 - 10 }, (_, i) => (i + 10).toString())
  }


  const handleSubmit = () => {
    onSubmit(formData)
    onCancel()
  }

  return (
    <View className='edit-modal-overlay'>
      <View ref={modalRef} className='edit-modal-container'>
        <View className='edit-modal-content'>
          <Text className='edit-modal-title'>编辑个人信息</Text>
          <View className='edit-modal-section'></View>
          {[
            { label: '身高(cm)', key: 'height' },
            { label: '体重(kg)', key: 'weight' },
            { label: '年龄', key: 'age' },
            { label: '目标体重(kg)', key: 'targetWeight' },
            { label: '每日目标(大卡)', key: 'dailyGoal' }
          ].map((item) => (
            <View key={item.key} className='form-item'>
              <Text className='form-label'>{item.label}</Text>
              {(item.key === 'dailyGoal') ? (
                <Input
                  type='number'
                  value={formData[item.key].toString()}
                  onInput={(e) => setFormData(prev => ({
                    ...prev,
                    [item.key]: Number(e.detail.value)
                  }))}
                  className='form-input'
                />
              ) : (
                <Picker
                  mode='selector'
                  range={pickerRanges[item.key as keyof typeof pickerRanges]}
                  value={formData[item.key] - (item.key === 'height' ? 140 : (item.key === 'weight'||item.key === 'targetWeight') ? 30 : 10)}
                  onChange={handlePickerChange(item.key as keyof typeof pickerRanges)}
                >
                  <View className='picker-input'>
                    {formData[item.key]} {item.key === 'height' ? 'cm' : (item.key === 'weight' || item.key === 'targetWeight') ? 'kg' : '岁'}
                  </View>
                </Picker>
              )}
            </View>
          ))}

          <View className='modal-actions'>
            <View className='modal-button secondary' onClick={onCancel}>
              取消
            </View>
            <View className='modal-button primary' onClick={handleSubmit}>
              保存
            </View>
          </View>
        </View>
      </View>
    </View>
  )
}

export default EditModal